<template>
    <div class="wrap">
        <um-panel :name="cityName" tipText="选择城市" @show="showCity" :iconUrl="cityIcon"></um-panel>
        <ul class="list">
            <li class="item" v-for="item in list" :key="item.job_id" @click="goDetail(item)">
                <div class="info">
                    <div class="base">
                        <div class="name">{{item.job_name}}</div>
                        <div class="type">{{item.area_name}} | 兼职</div>
                    </div>
                    <span class="tag-base price">{{item.salary}}元/天</span>
                </div>
                <div class="tag-list">
                    <span class="tag-item tag-base" v-for="(tag, key) in item.tags" :key="key">{{tag}}</span>
                </div>
            </li>
        </ul>
        <van-action-sheet :show="visibleArea" @close="visibleArea = false">
            <van-area :area-list="areaList" @cancel="showCity" @confirm="changeCity" :columns-num="2" title="选择城市"/>
        </van-action-sheet>
    </div>
</template>
<script>
import Panel from '../../../components/choose.vue';
import areaList from '../../../common/js/city.js';
const cityIcon = require('@static/images/city-icon.png');

export default {
    data () {
        return {
            cityIcon,
            visibleArea: false,
            list: [],
            areaList,
            cityName: '',
            pageNum: 1,
            pageSize: 10
        };
    },
    components: {
        'um-panel': Panel
    },
    onReachBottom(){
        this.getList(this.pageNum + 1);
    },
    methods: {
        showCity() {
            this.visibleArea = !this.visibleArea;
        },
        changeCity(e) {
            const cityInfo = e.target.values[1];
            this.$setStorage('jobCity', cityInfo);
            this.cityName = cityInfo && cityInfo.name || '';
            this.showCity();
            this.$nextTick(() => {
                this.getList(1);
            });
        },
        getList(pageNum = this.pageNum) {
            if (this.cityName) {
                this.$api.getJobList({
                    areaId: this.$getStorage('jobCity').code,
                    pageNum,
                    pageSize: this.pageSize
                }).then(({data}) => {
                    const list = data.jobsList.map((item) => {
                        item.tags = item.jobs_welfare.split(',');
                        return item;
                    });
                    if (pageNum > 1) {
                        this.list =  [...this.list, ...list];
                    } else {
                        this.list = list;
                    }
                    this.pageNum = pageNum;
                });
            }
        },
        goDetail(item) {
            wx.navigateTo({ url: "/pages/job/detail/main?id=" + item.job_id });
        }
    },
    onShow() {
        Object.assign(this.$data, this.$options.data());
        const jobCity = this.$getStorage('jobCity');
        this.cityName = jobCity && jobCity.name;
        this.$nextTick(this.getList);
        this.pageNum = 1;
    }
}
</script>
<style lang="scss" scoped>
.wrap {
    padding: 15px;
    min-height: calc(100% - 30px);
    background: $grey-bg;
}
.header {
    display: flex;
    align-items: center;
    background: #fff;
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 4px;
}
.city-icon {
    width: 34px;
    height: 34px;
    margin-right: 10px;
}
.city-info {
    flex: 1;
}
.city-name {
    font-size: 13px;
    color: $color-text;
}
.city-tips {
    font-size: 12px;
    color: $grey-color;
    margin-top: 5px;
}
.item {
    padding: 15px;
    border-radius: 4px;
    background: #fff;
    margin-bottom: 15px;

}
.info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 15px;
    border-bottom: 1px solid $grey-border-color;
}
.name {
    color: $color-text;
    font-size: 13px;
}
.type {
    color: $theme-color;
    font-size: 12px;
    margin-top: 10px;
}
.price {
    color: #fff;
    background: $theme-color;
}
.tag-list {
    padding-top: 15px;
}
.tag-item {
    font-size: 12px;
    background: #F9F9F9;
    color: #40444C;
    margin-right: 10px;
}
</style>